<template>
    <span class="item-amount">
        <a @click="decrease">-</a>
        <input type="text" v-model.number="count" @input="handleInput">
        <a @click="increase">+</a>
    </span>
</template>

<script>
export default {
    name: 'ItemAmount',
    props: [ 'amount' ],
    data(){
        return {
            count: this.amount ,
            itemId: 0
        }
    },
    mounted(){
        this.itemId = this.$parent.item.id ;
    },
    methods: {
        decrease(){
            this.count -- ;
            this.emit();
        },
        increase(){
            this.count ++ ;
            this.emit();
        },
        handleInput(){
            // let value = evt.target.value;
            // 应该检查 value 是否是正整数，若不是正整数则可以弹出警告 (这一步被省略)

            this.emit();
        },
        emit(){
            let params = {
                id: this.itemId,
                amount: this.count
            }
            // 通过全局属性来触发事件并传递参数
            this.$eventBus.emit( this.$amountChange , params );
        }
    }
}
</script>

<style scoped>
.item-amount{
    display: inline-flex;
    width: 80%;
    min-width: 100px;
    max-width: 200px;
    height: 80%;
    line-height: 1.5rem;
    background: blue;
    border: 1px solid blue ;
}

.item-amount>a{
    flex-basis: 25%;
    color: #fff;
    cursor: pointer;
    user-select: none;
}
.item-amount>input{
    flex-basis: 50%;
    border: none ;
    outline: none;
    width: 50%;
    text-align: center;
}
</style>